<template>
  <div class="p-10">
    <van-button class="m-r-10 m-b-10 dazzling" @click="logout" type="info">
      退出登录
    </van-button>
    <van-button
      class="m-r-10 m-b-10 dazzling"
      @click="goPage(key)"
      :key="index"
      v-for="(item, key, index) in pageList"
      type="info"
    >
      {{ item.title }}
    </van-button>
  </div>
</template>

<script>
import { getHandle } from '@/api'
import { Button } from 'vant'
import { clear } from '@/utils/auth'
import pageList from '@/router/index.js'
export default {
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      pageList: pageList
    }
  },
  created() {
    this.height = document.body.clientHeight + 'px'
  },
  mounted() {},
  methods: {
    goPage(key) {
      this.$bridge.call(key)
    },
    logout() {
      clear()
      this.$toast('退出成功！')
      setTimeout(() => {
        this.$bridge.call('logout')
      }, 1000)
    }
  }
}
</script>

<style scoped>
.dazzling{
  background:  rgb(83, 94, 243);
  animation: change 2s linear infinite;
  color: #fff;
}
/* .dazzling{
  background: repeating-conic-gradient(rgb(255, 255, 255), rgb(3, 20, 248), rgb(255, 255, 255) 0.8deg);
  animation: change 2s linear infinite;
  color: black;
} */
/* @keyframes change {
        0% {
        }
        20% {
          background: repeating-conic-gradient(rgb(255, 255, 255), rgb(247, 111, 111), rgb(255, 255, 255) 0.7deg);
        }
        40% {
          background: repeating-conic-gradient(rgb(255, 255, 255), rgb(245, 243, 143), rgb(255, 255, 255) 0.6deg);
        }
        60% {
          background: repeating-conic-gradient(rgb(255, 255, 255), rgb(157, 252, 133), rgb(255, 255, 255) 0.5deg);
        }
        80% {
          background: repeating-conic-gradient(rgb(255, 255, 255), rgb(140, 133, 247), rgb(255, 255, 255) 0.4deg);
        }
        100% {
          background: repeating-conic-gradient(rgb(255, 255, 255), rgb(248, 143, 234), rgb(255, 255, 255) 0.4deg);
        }
      } */
</style>
